<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body id="body">
    <div id="list">
        <p>pppppp</p>
        <p class="box">box1</p>
        <p>pppppp</p>
        <p>pppppp</p>
        <p class="box">box2</p>
        <p>pppppp</p>
        <p>pppppp</p>
        <div class="box">
            box3
            <p>divdiv的孙子</p>
        </div>
        <p>pppppp</p>
        <p>last</p>
    </div>
    <script>
        // filter(obj|fn|ele)
        // 筛选与制定的表达式相匹配的元素集合.这个方法用于缩小匹配的范围,用逗号分割多个表达式
        $(function(){
            // $("#list p").filter(".box, :first, :last").css("background","red");
            // $("#list p").filter(".box").css("background","green");
        

        // find(obj|ele)
        // 搜索所有与指定表达式匹配的元素,这个函数是找出正在处理的元素的后代元素的好方法.
        // 所有搜索都依靠jq表达式来完成
        $("#list").find(".box").css("color","yellow");
        })
    </script>
</body>
</html>